<template>
	<view @click="e=>$emit('click',e)" class="good-item">
		<view class="flex-row justify-between align-center">
			<text class="text-gray font12">{{TableTypesEnumTexts[data.type]}}</text>
			<view @click.stop class="flex-row justify-end align-center">
				<text :class="[ data.continueAt?'text-light':'text-light-green','font12','p_r10']">
					{{data.continueAt?'已结束':'进行中'}}
				</text>
				<uni-tag @click="onRemove" type="error" size="small" inverted text="删除" v-if="data.continueAt" />
				<uni-tag @click="onComplete" type="primary" size="small" inverted text="结桌" v-else />
			</view>
		</view>
		<view class="flex-row flex-wrap flex-shrink">
			<Cover :isMaster="data.master&&item.user_id===data.master" :photo="item.photo" :name="item.cnname"
				:num="item.num" v-for="(item,i) of members" :key="i" />
		</view>
		<view class="flex-row font12 justify-between">
			<view class="flex-row text-light time-range-box font12">
				<view class="">{{data.created_at}}</view>
				<view class="p_x10">~</view>
				<view>
					<text>{{data.end_time||'至今'}}</text>
				</view>
			</view>
			<view class="text-light-blue font12">
				<text v-if="item.continueAt">{{item.continueAt}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		TableTypesEnumTexts
	} from "../../vars/TableTypes.js"
	import Table from "../../api/Table.js"
	import Cover from "@/myComponents/tableItem/Cover.vue"
	import {
		toast,
		imagePrefix,
		toastComfirm,
	} from "@/utils/helpers.js"
	export default {
		name: "TableItem",
		emits: ["click", "onInit"],
		components: {
			Cover
		},
		props: {
			data: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				TableTypesEnumTexts,
			}
		},
		computed: {
			members() {
				return this.data.get_member || [];
			},
			hours() {
				const data = this.data;
				const s = new Date(data.created_at).getTime();
				const e = (data.end_time ? new Date(data.end_time) : new Date()).getTime();
				const subHours = (e - s) / 1000 / 60 / 60;
				return Math.floor(subHours);
			},
		},
		methods: {
			imagePrefix,
			// 结桌
			async onComplete() {
				try {
					const can = await toastComfirm("确定结桌吗？")
					if (!can) {
						return;
					}
					await Table.complete(this.data.id)
					toast('结桌成功')
					this.$emit('onInit')
				} catch (e) {
					toast(e.message)
				}

			},
			// 删除
			async onRemove() {
				try {
					const can = await toastComfirm("确定删除吗？")
					if (!can) {
						return;
					}
					await Table.remove(this.data.id)
					toast('删除成功')
					this.$emit('onInit')
				} catch (e) {
					toast(e.message)
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.good-item {
		margin: 10rpx 0;
		border-radius: 10rpx;
		padding: 20rpx;
		box-shadow: 0px 0rpx 2rpx 0rpx rgba(153, 153, 153, 0.5);

		.cover-box-item {
			padding-top: 10rpx;
			padding-right: 30rpx;

			.u-name-box {
				width: 100%;
				overflow: hidden;
				height: 50rpx;
				line-height: 50rpx;
			}

			.u-cover-box {
				width: 120rpx;
				border-radius: 5rpx;
				flex-shrink: 0;
				position: relative;


				.cover {
					width: 100rpx;
					height: 100rpx;
					border: solid 1rpx #ccc;
					border-radius: 3rpx;
				}

				.master-box {
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					padding: 0 10rpx;
					border-radius: 10rpx;
					background-color: $uni-color-error;
				}
			}
		}


	}
</style>
